<template>
	<view>
		<view class="zhezhao"></view>
		<view class="count">
			<view @click="no_dati" v-if="0" class="cha"><uni-icons type="closeempty" color="#fff"></uni-icons></view>
			<view class="title">
				<view class="icon" >
					<image style="width: 100%;height: 100%;" mode="widthFix" src="https://wechat-pictures-1301970825.file.myqcloud.com/bang.png"></image>
				</view>
				<text>答题正确</text>
				<view class="icon timg">
					<image style="width: 100%;height: 100%;" mode="widthFix" src="https://wechat-pictures-1301970825.file.myqcloud.com/bang.png"></image>
				</view>
				</view>
				<view class="con">
					恭喜<text style="color: red;">{{username}}</text>答题全部正确。请截图给<text style="color: red;">{{d_z_username}}</text>店长领取答题红包～
				</view>
				<view class="item">
					<view class="name">观看视频：</view>
					<view class="value">{{video_name}}</view>
				</view>
				
				<view class="item" style="margin-bottom: 82rpx;">
					<view class="name">答题时间：</view>
					<view class="value">{{time}}</view>
				</view>
			
				<view @click="no_dati()" class="button">点击前往人康养生小视频</view>
				<view class="msg">{{num}}s 后自动关闭</view>
				<!-- <button>确定</button> -->
		</view>
	</view>
</template>
<script>
	export default {
		name:"yes_dati",
		props:['username','d_z_username','video_name','yao_name','time'],
		data() {
			return {
				num:10
			};
		},
		created() {
			var _this=this;
		 setInterval(function(){
			 _this.num=_this.num-1;
			 if(_this.num<=0){
				 _this.$emit("no_dati")
			 }
		 },1000)
		},
		methods:{
			no_dati(){
			
				this.$emit("no_dati")
			}
		}
	}
</script>

<style>
   .zhezhao{
	   width: 100vw;
	   height: 100vh;
	   background-color: #000000;
	   opacity: 0.5;
   }
   .count{
	   width: 664upx;
	   /* height: 700upx; */
	   position: fixed;
	   top: 50%;
	   left: 50%;
	   transform: translate(-50%,-50%);
	   border-radius: 24upx;
	   background-color: #FFFFFF;
	   background-image: url(https://wechat-pictures-1301970825.file.myqcloud.com/baijing.png);
	   background-size: 100% auto;
	   z-index: 100;
	   box-sizing: border-box;
	   padding: 0 64upx;
	   padding-bottom: 64upx;
   }
   .count .cha{
	   background-color: #CCCCCC;
	   border: 2upx solid #FFFFFF;
	   border-radius: 50%;
	   position: absolute;
	   top: -30upx;
	   right: -30upx;
	   width: 60upx;
	   height: 60upx;
	   display: flex;
	   justify-content: center;
	   align-items: center;
   }
   .title{
	   width: 100%;
	   text-align: center;
	   margin-top: 66upx;
	   font-size: 34upx;
	   font-weight: 700;
	   height: 50upx;
	   display: flex;
	   justify-content: center;
	   align-items: center;
   }
   .title .icon{
	   width: 40upx;
	   height: 40upx;
   }
   .title text{
	   margin: 0 30upx;
   }
   .con{
	   width: 100%;
	   margin-top: 64upx;
	   font-size: 28upx;
	   color: #565656;
   }
   .item{
	   width: 100%;
	   display: flex;
	   margin: 32upx 0;
   }
   .item .name{
	   width: 144upx;
	   font-size: 28upx;
	   color: #565656;
	   display: flex;
	   justify-content: space-between;
   }
   .item .value{
	   font-size: 30upx;
	   color: red;
	   font-weight: 700;
	   flex: 1;
   }
   .msg{
	   width: 100%;
	   text-align: center;
	   font-size: 28upx;
	   color: #999999;
	   margin-top: 24upx;
   }
   .timg{
	   transform: rotatey(180deg);
   }
   .button{
	   width: 520upx;
	   height: 80upx;
	   background: linear-gradient(270deg, #FF610B 0%, #F19106 69%, #FBCB17 100%);
	   border-radius: 40upx;
	   font-size: 32upx;
	   font-weight: 500;
	   line-height: 80upx;
	   text-align: center;
	   margin: 0 auto;
	   color: #FFFFFF;
   }
</style>
